<!--
 * @Author: your name
 * @Date: 2021-03-19 19:45:28
 * @LastEditTime: 2021-03-26 16:57:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue空包c:\Users\Administrator\Desktop\practice\demo\src\views\login.vue
-->
<template>
  <div>
      <!-- 登录页面 -->
      <div id="main">
          <p><img id="main_img" src="../images/guozi.png"/></p>
          <!-- 双向 -->
          <p><input id='main_num' v-model="user" style="font-size:17px" type="text" placeholder="号码"/></p>
          <!-- <p id="main_warn">手机号必须为11位数</p> -->
          <p><input id='main_pwd' v-model="pwd" style="font-size:17px" type="text" placeholder="密码"/></p>
          <div id="main_group">
              <!-- 点击跳转忘记密码界面和注册界面 -->
              <p>
                <span>没有账号？<button id="main_group_reg" @click='jump'>立即注册</button></span>
                <span id="main_forget" @click="forget">忘记密码？</span>
              </p>
          </div>
          <button id="main_but" @click='login'>登录</button>
          <!-- 下面的快捷登录和小图标。。。 -->
          <div id="main_quicklog">
              <p><span>——————</span>快捷登录<span>——————</span></p>
          </div>
          <div id="main_quickgroup">
              <dl>
                  <dt><i class="iconfont icon-QQ1"></i></dt>
                  <dd><img src="../images/QQ.png"/></dd>
              </dl>
              <dl>
                  <dt><i class="iconfont icon-weixin2"></i></dt>
                  <dd><img src="../images/weixin.png"/></dd>
              </dl>
              <dl>
                  <dt><i class="iconfont icon-xinlangweibo1"></i></dt>
                  <dd><img src="../images/weibo.png"/></dd>
              </dl>
          </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            user:'',
            pwd:'',
            yzm:''
        }
    },
    methods:{
        jump(){
            this.$router.push('/reg')
            console.log('成功')
        },
        forget(){
            this.$router.push('/change_pwd')
        },
        login(){
            const phone = this.user;
            const password = this.pwd;
            axios({
                url:'http://1807a.gtxiaoyu.cn/shop/shop/login',
                method:'post',
                data:{
                    phone,
                    password
                }
            }).then((res)=>{
                console.log(res,'78')
                if(res.data.status===400){
                    alert(res.data.msg)
                }else{
                    console.log(res)
                    this.$router.push('/layout/home')
                    localStorage.setItem('token',res.data.data.token)
                }
            })
        }
    }
}
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    #main_warn{
        margin-left: 50px;
        font-size: 13px;
        color: red;
    }
    #main{
        width: 400px;
        height: 600px;
        /* border: 1px solid grey; */
        margin: 0 auto;
    }
    #main_img{
        width:100px;
        height: 100px;
        border-radius: 50%;
        margin-left: 150px;
        margin-top: 30px;
    }
    #main_quickgroup{
        width: 400px;
        height: 400px;
        /* border: 1px solid grey; */
        display: flex;
    }
    #main_quickgroup img{
        width: 40px;
        border-radius: 50%;
        height: 40px;
        margin-top: 15px;
        margin-left: 65px;
    }
    #main_num{
        width: 300px;
        height: 30px;
        border: none;
        outline: none;
        margin-top: 40px;
        margin-left: 50px;
        border-bottom: 1px solid grey;
        /* 调整距离 */
        /* padding-left: 10px; */
        /* text-indent: 10px; */
    }
    #main_pwd{
        width: 300px;
        height: 30px;
        border: none;
        outline: none;
        margin-top: 25px;
        margin-left: 50px;
        border-bottom: 1px solid grey;
    }
    .p{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .p button{
        width: 150px;
    }
    #main_yzm{
        width: 300px;
        height: 30px;
        border: none;
        outline: none;
        margin-top: 25px;
        margin-left: 50px;
        border-bottom: 1px solid grey;
    }
    #main_group{
        width: 300px;
        height: 20px;
        /* border: 1px solid grey; */
        margin-left: 50px;
        font-size: 12px;
        margin-top: 5px;
    }
    #main_group_reg{
        border: none;
        outline: none;
        font-size: 12px;
        color: red;
        background: white;
    }
    #main_forget{
        margin-left: 130px;
        color: grey;
    }
    #main_but{
        width: 330px;
        height: 40px;
        background: red;
        outline: none;
        border: none;
        color: white;
        border-radius:50px;
        margin-left: 35px;
        margin-top: 50px;
    }
    #main_quicklog{
        font-size: 13px;
        margin-top: 100px;
        margin-left:88px;
        color: grey;
    }
</style>